<template>
  <div class="box">
    <!-- 返回 -->
    <div class="level" @click="goHome">
      <i class="el-icon-arrow-left"></i>
      <p>返回</p>
    </div>

    <!-- 介绍 -->
    <div class="introduce">
      <!-- <img src="../assets/banner.jpg" /> -->
      <div class="competition">
        <h4>2024年中国电信“点亮星辰”劳动与技能竞赛</h4>
        <p>
          通过微调长尾模型，探索和挖掘模型在少量图像中目标识别的能力。通过少量数据、基于现有或熟悉的CV基础模型或者大模型微调完成特定识别任务。考查团队在AI领域的专业技能和创新能力，实现一套城市治理布控的安防系统，包括乱堆物料识别、非法小广告识别、垃圾桶满溢识别、沿街晾晒识别。
        </p>
        <p>比赛时间：2024.06.22-2024.07.30</p>
        <p>主办方：中华出版促进会(中宣部主管)等</p>
      </div>
      <div class="applicants">
        <p>报名人数：90</p>
        <el-button v-if="this.showIndex == 4" type="primary" disabled
          >已报名</el-button
        >
      </div>
    </div>

    <!-- 比赛介绍 -->
    <div class="results">
      <ul>
        <li @click="showIndex = 1" :class="showIndex == 1 ? 'select' : ''">
          比赛结果
        </li>
        <li @click="showIndex = 2" :class="showIndex == 2 ? 'select' : ''">
          赛题解读
        </li>
        <li @click="showIndex = 3" :class="showIndex == 3 ? 'select' : ''">
          相关资料
        </li>
        <li @click="showIndex = 4" :class="showIndex == 4 ? 'select' : ''">
          提交结果
        </li>
      </ul>
    </div>
    <div v-if="this.showIndex == 1">
      <div class="requirement"></div>
      <div class="bottom">
        <input type="checkbox" />
        <p>我已阅读并理解该声明</p>
      </div>
      <div class="button">
        <el-button type="primary" @click="goSubmit">提交并保存</el-button>
      </div>
    </div>

    <!-- 提交结果 -->
    <div class="equal" v-else-if="this.showIndex == 4">
      <h5>提交方式</h5>
      <p>请上传结果文件</p>
      <el-button type="primary" plain @click="dialogVisible = true"
        >选取文件</el-button
      >
    </div>

    <!-- 提交结果文件 -->
    <el-dialog
      title="提交 结果文件"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="80%"
    >
      <el-form label-width="25%">
        <el-form-item label="比赛名称">
          <p>2024年中国电信“点亮星辰”劳动与技能竞赛</p>
        </el-form-item>
        <el-form-item label="赛段">
          <p>阶段赛</p>
        </el-form-item>
        <el-form-item label="上传结果文件">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >结果文件</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="今日剩余提交次数">
          <span>10次</span>
          <span>(该赛段每日最多提交10次)</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRegister">提交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import navList from "../components/navList.vue";
export default {
  data() {
    return {
      showIndex: 4,
      fileList: [],
      dialogVisible: false,
    };
  },
  methods: {
    // 返回上一级
    goHome() {
      this.$router.go(-1);
    },
    // 提交报名
    goSubmit() {
      this.showIndex = 4;
    },

    // 跳转到报名
    submitRegister() {
      this.dialogVisible = false;
      this.$router.push("/registerNow");
    },

    // 上传文件
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file) {},
    handlePreview(file) {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  computed: {},
  filters: {},
  watch: {},
  components: {
    navList,
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  font-size: 0.9rem;
  box-sizing: border-box;
  .level {
    text-align: left;
    padding: 0 1.25rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    i {
      font-size: 1.125rem;
    }
  }

  .introduce {
    padding: 1.25rem;
    box-sizing: border-box;
    justify-content: space-between;
    img {
      width: 18rem;
      border-radius: 0.625rem;
    }
    .competition {
      text-align: left;
      margin: 0 1.25rem;
      h4 {
        margin: 0 0 0.625rem 0;
        font-size: 1.25rem;
      }
      p {
        margin: 0.625rem 0;
      }
    }
    .applicants {
      margin: 1.25rem;
      p {
        margin: 0.625rem 0;
      }
    }
  }

  .results {
    ul {
      font-size: 1rem;
      padding: 1.25rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      li {
        padding: 0.625rem 1.875rem;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }

  .requirement {
    margin: 1.25rem;
    text-align: left;
    border: 0.125rem solid #e3e3e3;
    padding: 1.25rem;
    box-sizing: border-box;
  }

  .bottom {
    margin: 1.25rem;
    display: flex;
    align-items: center;
    p {
      margin-left: 0.625rem;
    }
  }

  .button {
    margin: 1.25rem;
    text-align: left;
  }
  .equal {
    margin: 1.25rem;
    text-align: left;
    h5 {
      font-size: 1.1875rem;
      margin: 1.25rem 0;
    }
    p {
      margin: 1.25rem 0;
    }
  }
}
.select {
  color: #1890ff;
  border-bottom: 0.1rem solid #1890ff;
}
</style>
